<template>
    <div class="bountDetail-page">
        <van-image class="bountDetail-bg" :src="require('@/assets/image/my-bg.png')"></van-image>
        
        <div class="head">
            <van-image class="head-img" :src="require('@/assets/image/notImg.png')"></van-image>
            <div class="user-name">{{bountForm.userName}}</div>
            <div class="user-no">{{bountForm.userNo}}</div>
        </div>
        <div class="bount-table">
            <div class="t-heaad">
                <div class="t-h-name">{{  $i18n.t('default.bount.period') }}: {{bountForm.period}}</div>
                <div class="t-h-time">{{  $i18n.t('default.bount.totalBonus') }}: {{bountForm.bonusActualy}}</div>
            </div>
            <div class="t-body">
                <div class="t-body-box">
                    <div class="t-b-name price">{{bountForm.bonusRec}}</div>
                    <div class="t-b-time">{{  $i18n.t('default.bount.recommendBonus') }}</div>
                </div>
                <div class="t-body-box t-body-box-left">
                    <div class="t-b-name price">{{bountForm.bonusPd}}</div>
                    <div class="t-b-time">{{  $i18n.t('default.bount.hitBonus') }}</div>
                </div>
            </div>
            <div class="t-body">
                <div class="t-body-box">
                    <div class="t-b-name price">{{bountForm.bonusLeader}}</div>
                    <div class="t-b-time">{{  $i18n.t('default.bount.leaderBonus') }}</div>
                </div>
                <div class="t-body-box t-body-box-left">
                    <div class="t-b-name price">{{bountForm.bonusSell}}</div>
                    <div class="t-b-time">{{  $i18n.t('default.bount.retailBonus') }}</div>
                </div>
            </div>
        </div>
        <div class="bount-list">
            <div class="list-item" v-for="(item,index) in bountForm.bonusPengDetail" :key="index">
                <div class="title">
                    <div class="list-name">{{item.userName}}</div>
                    <div class="list-no">{{  $i18n.t('default.bount.areaCode') }}: {{ item.userNo }}</div>
                </div>
                <div class="list-time">{{  $i18n.t('default.bount.EstemPeriod') }}: {{item.saleAmountAll}}</div>
                <div class="list-time">{{  $i18n.t('default.bount.thisPeriod') }}: {{item.saleKeep}}</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'bountDetail',
    data() {
        return {
            bountForm:{}
        }
    },
    created() {
        console.log(this.$route.query.periodId);
        if(this.$route.query.periodId){
            this.init(this.$route.query.periodId)
        }
    },
    methods: {
        init(id){
            this.$api.get('/bonus/detail/'+id).then(res=>{
                if(res.code == 'SUCCESS'){
                    this.bountForm = res.data;
                }
            })
        }
    }
}
</script>

<style scoped lang="scss">
.bountDetail-page{
    background: #f4f4f4;
    position: relative;
    z-index: 1;
    min-height: 100vh;
    .bountDetail-bg{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
    }
    .head{
        height: 3.77rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .head-img{
            width: 1.4rem;
            height: 1.4rem;
            border-radius: 50%;
            margin-bottom: .2rem;
        }
        .user-name{
            font-size: .32rem;
            font-weight: bold;
            color: #755936;
            
            margin-bottom: .1rem;
        }
        .user-no{
            font-size: .24rem;
            color: #755936;
        }
    }
    .bount-table{
        background: #fff;
        .t-heaad{
            display: flex;
            // justify-content: space-between;
            align-items: center;
            // margin-bottom: .3rem;
            border-top: 0.01px solid #755936;
            height: 1rem;
            color: #755936;
            font-size: 0.28rem;
            font-weight: 400;
            .t-h-name{
                flex:1;
                padding-left: .3rem;
                height: 1rem;
                line-height: 1rem;
            }
            .t-h-time{
                flex:1;
                height: 1rem;
                line-height: 1rem;
                padding-left: .3rem;
                border-left: 0.01rem solid #755936;
            }
        }
        .t-body{
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 0.01rem solid #755936;
            height: 2rem;
            .t-body-box{
                width: 50%;
                height: 2rem;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
            }
            .t-body-box-left{
                border-left: 0.01rem solid #755936;
            }
            .t-b-name{
                font-size: .48rem;
                font-weight: bold;
                margin-bottom: .15rem;
            }
            .t-b-time{
                font-size: .3rem;
                color: #755936;
            }
            
        }
    }
    .bount-list{
        // margin-top: .3rem;
        padding: .3rem;
        .list-item{
            padding: .3rem;
            border: 0.01rem solid #755936;
            background: #fff;
            margin-top: .3rem;
            .title{
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: .3rem;
                .list-name{
                    // font-size: .32rem;
                    font-weight: bold;
                    
                }
                .list-no{
                    color: #755936;
                }
            }
            .list-time{
                font-size: .24rem;
                color: #755936;
                margin-bottom: .1rem;
            }
        }
    }
}
</style>

<style>
.bountDetail-page .head .head-img img{
    border-radius: 50%;
}
</style>